import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';

import Relate from './relateMe/Relate';
import Publish from './myPublish';
import Collect from './relateMe/Collect';
import Theme from './monitorTheme';
import Content from './monitorContent';
import Comment from './monitorComment';
import Communication from '../communication';

@withRouter
@inject('centerStore')
@observer
export default class CenterRoute extends React.Component {

  render(){
    const { centerStore: { joinLayout, createCoworkListLayout, responseLayout, relateLayout, publishLayout, collectLayout, themeLayout, contentLayout, commentsLayout } } = this.props;
    return (
      <div>
        <Route
          key={joinLayout.id}
          path={joinLayout.path}
          render={() => (// 参与的协作
            <RouteLayout>
              <div key="join" className="wm-route-layout">
                <Communication/>
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={responseLayout.id}
          path={responseLayout.path}
          render={() => (// 负责的协作
            <RouteLayout>
              <div key="response" className="wm-route-layout">
                <Communication/>
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={createCoworkListLayout.id}
          path={createCoworkListLayout.path}
          render={() => (// 创建的协作
            <RouteLayout>
              <div key="create" className="wm-route-layout">
                <Communication/>
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={relateLayout.id}
          path={relateLayout.path}
          render={() => (// 与我相关
            <RouteLayout>
              <div key="relate" className="wm-route-layout">
                <Relate />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={publishLayout.id}
          path={publishLayout.path}
          render={() => (// 我的发表
            <RouteLayout>
              <div key="publish" className="wm-route-layout">
                <Publish />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={collectLayout.id}
          path={collectLayout.path}
          render={() => (// 收藏的帖子
            <RouteLayout>
              <div key="collect" className="wm-route-layout">
                <Collect />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={themeLayout.id}
          path={themeLayout.path}
          render={() => (// 主题监控
            <RouteLayout>
              <div key="theme" className="wm-route-layout">
                <Theme />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={contentLayout.id}
          path={contentLayout.path}
          render={() => (// 内容监控
            <RouteLayout>
              <div key="content" className="wm-route-layout">
                <Content />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={commentsLayout.id}
          path={commentsLayout.path}
          render={() => (// 评论监控
            <RouteLayout>
              <div key="comment" className="wm-route-layout">
                <Comment />
              </div>
            </RouteLayout>
          )}
        />
      </div>
    );
  }
}